<template>
    <div>
        <!--1.配置表格组件-->
        <el-table
                :data="tableData"
                border
                style="width: 60%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="图书名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="publish"
                    label="出版社"
                    width="180">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--2.配置分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                page-size="6"
                :total="total"
                @current-change="page">  <!--配置当前页的触发事件page-->
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            edit(row) {     //row中封装了该行的信息内容
                /*实现思路：先获取到要修改内容的id；将id传至后台，将查询到的数据传给前端的修改页面；
                * 修改页面结束后，将数据*/

                //1.携带id信息的页面跳转
                this.$router.push({
                    path: '/updateBook',
                    query: {
                        id: row.id
                    }
                });
            },
            deleteBook(row){
                //此处完成向后端发送id,让后端执行对应操作后，在进行跳转即可
                const _this = this;
                axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function (resp) {
                    /*消息提示框设置：完成信息删除成功的提示后，再跳转*/
                    _this.$alert('《'+row.name+'》删除成功！', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            //删除完成后，本地刷新
                            window.location.reload();
                        }
                    });
                })
            },
            page(currentPage){
                const _this = this;     //将全局的作用域转到function()内部
                axios.get('http://localhost:8181/book/findAllByPage/'+currentPage+'/6').then(function(resp){
                    /*即将resp参数的data中的content内容赋值给tabledata属性参数*/
                    _this.tableData = resp.data.content;    //获取全体内容
                    _this.total = resp.data.totalElements;  //获取所有数据条数

                })
            }
        },

        /*1.此处为从后台获取到的数据*/
        created(){
            const _this = this;     //将全局的作用域转到function()内部
            axios.get('http://localhost:8181/book/findAllByPage/1/6').then(function(resp){
                /*即将resp参数的data中的content内容赋值给tabledata属性参数*/
                _this.tableData = resp.data.content;    //获取全体内容
                _this.total = resp.data.totalElements;  //获取所有数据条数
               // console.log(resp.data)
            })
        },

        /*2.此处为静态数据*/
        data() {
            return {
                total: null,
                tableData: null
                /*[{
                    id: '1',
                    name: '解忧杂货店',
                    author: '东野圭吾',
                }, {
                    id: '2',
                    name: '追风筝的人',
                    author: '卡勒德·胡塞尼',
                }, {
                    id: '3',
                    name: '人间失格',
                    author: '太宰治',
                }, {
                    id: '4',
                    name: '这就是二十四节气',
                    author: '东野圭吾',
                }]*/
            }
        }
    }
</script>